<template>
    <el-form ref="formRef" :model="form" labelWidth="120px" label-suffix="：">
        <el-steps :active="active">
            <template v-for="(step, index) in steps" :key="index">
                <el-step>
                    <template #title>
                        <span class="step-title" @click="active = step.value">{{ step.title }}</span>
                    </template>
                </el-step>
            </template>
        </el-steps>

        <div v-show="active === 1" class="step1">
            <el-form-item label="节点名称">
                <el-input v-model="form.nodeName"></el-input>
            </el-form-item>
            <el-form-item label="节点ID">
                <el-input v-model="form.typeConcatName" disabled></el-input>
            </el-form-item>
            <el-form-item label="kafka数据源">
                <el-select v-model="form.datasourceId" @change="form.kafka_servers = DsList.find(item => item.datasourceId === form.datasourceId).dbHost">
                    <el-option
                        v-for="item in DsList"
                        :key="item.datasourceId"
                        :label="item.datasourceGroup + '_' + item.datasourceName + '_' + item.datasourceType + '_' + item.dbHost"
                        :value="item.datasourceId"/>
                </el-select>
            </el-form-item>
            <el-form-item label="消费主题">
                <el-input v-model="form.kafka_topic"></el-input>
            </el-form-item>
            <el-form-item label="消费分组">
                <el-input v-model="form.kafka_group_id"></el-input>
            </el-form-item>
            <el-form-item label="消费时间">
                <el-select v-model="form.kafka_offset_reset">
                    <el-option value="earliest"/>
                    <el-option value="latest"/>
                </el-select>
            </el-form-item>
            <el-form-item label="自动提交">
                <el-radio-group v-model="form.enable_auto_commit" active-label="Y" inactive-label="N">
                    <el-radio label="Y">是</el-radio>
                    <el-radio label="N">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="form.description" type="textarea" placeholder="请输入内容"/>
            </el-form-item>
        </div>
        <div v-show="active === 2" class="step2">
        </div>
    </el-form>
    <dialog-footer @ok="submitForm" @cancel="cancel"/>

</template>

<script setup>
import {defineComponent, ref, onMounted, reactive, watch} from 'vue';
import {flowServiceStore} from '@data/store/flow';
import {search as datasourceList} from '@data/api/data/datasource'

const flowCount = flowServiceStore();
import {storeToRefs} from 'pinia';

const {flowData} = storeToRefs(flowCount);
defineComponent({
    name: 'KafkaInput',
});

const steps = ref([
    { value: 1, title: '基础属性' },
    { value: 2, title: '输入参数' }
]);
const active = ref(1);

const props = defineProps({
    detailObject: {
        type: Object,
        default: () => {
        },
    },
})
const DsList = ref([]);

const loading = ref(false);

const form = reactive({
    nodeName: '',
    name: '',
    type: 'KafkaInput',
    distribute: 'Y',
    copies: 1,
    kafka_servers: '',
    datasourceId: '',
    kafka_topic: '',
    kafka_group_id: '',
    enable_auto_commit: '',
    kafka_offset_reset: 'latest',
    description: '',

    GUI: {
        xloc: 1,
        yloc: 1,
        draw: 'Y'
    }
});


const emit = defineEmits(['cancel']);

onMounted(() => {
    getJdbcDs();
    form.nodeName = flowData.value[props.detailObject.id]?.nodeName || props.detailObject.data.label;
    form.kafka_servers = flowData.value[props.detailObject.id]?.kafka_servers || '';
    form.datasourceId = flowData.value[props.detailObject.id]?.datasourceId || '';
    form.kafka_topic = flowData.value[props.detailObject.id]?.kafka_topic || '';
    form.kafka_group_id = flowData.value[props.detailObject.id]?.kafka_group_id || '';
    form.enable_auto_commit = flowData.value[props.detailObject.id]?.enable_auto_commit || 'N';
    form.kafka_offset_reset = flowData.value[props.detailObject.id]?.kafka_offset_reset || 'latest';
    form.description = flowData.value[props.detailObject.id]?.description || '';
    form.name = props.detailObject.id;
    form.typeConcatName = `${props.detailObject.id}(${form.type}-${props.detailObject.id})`;

    form.distribute = flowData.value[props.detailObject.id]?.distribute || 'Y';

})

const getJdbcDs = () => {
    loading.value = true
    datasourceList({}).then(response => {
        const {list} = response.data
        console.log(list)
        DsList.value = list.filter(item => item.datasourceType === 'kafka')
        loading.value = false
    })
}

const submitForm = () => {
    flowCount.setFlowData(
        {
            ...flowData.value,
            [props.detailObject.id]: {
                ...form,
                name: `${form.type}-${form.name}`,
            }
        }
    )
    console.log(flowData.value);
    emit('cancel');

}
const cancel = () => {
    emit('cancel');
}

const toReader = () => {

}

const parseSql = () => {
}

const deleteField = () => {
    console.log('deleteField');
}

</script>

<style scoped>

</style>